<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <h1 ref="mymsg">{{msg}}</h1>
      <button @click="change">改变</button>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    // Vue.$nextTick this.$nextTick
    // Vue.$nextTick()
    // Vue中的nextTick涉及到Vue中DOM的异步更新
    // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
    // 应用场景   created 想操作dom元素 必须加nextTick
    // 2.初始化插件时候加nextTick
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "你好"
        }
      },
      created() {
        // 根元素未初始化
        // console.log(this.$refs.mymsg.innerHTML)//报错
        this.$nextTick(() => {
          // 延迟到vue实例挂载到dom 执行回调
          console.log(this.$refs.mymsg.innerHTML)
        })
      },
      mounted() {
        this.$nextTick(() => {
          // 确保一些插件在dom 彻底渲染完成或更新完成  在初始化插件
          // new Swiper(".swiper-content", {

          // })
        })

      },
      methods: {
        change() {
          this.msg = "世界"
          // console.log(this.$refs.mymsg.innerHTML)
          this.$nextTick(() => {
            console.log(this.$refs.mymsg.innerHTML)
            this.$refs.mymsg.innerHTML = "明天放假"
          })
        }
      }

    })




  </script>
</body>

</html>